<template>
  <div class="p-1">
    <div
      class="lattice"
      :style="{ backgroundColor: bgColor, boxShadow: '0 0 1px ' + bgColor }"
    >
      <div class="lattice_body" :class="onlyOne ? 'onlyOne' : ''">
        <slot name="bodyIcon">
          <RadarChartOutlined class="bodyIcon" />
        </slot>

        <p class="bodyNumber">{{ bodyNumber }}</p>
      </div>

      <slot name="flooter">
        <p class="lattice_flooter">
          {{ titleName }}
        </p>
      </slot>
    </div>
  </div>
</template>
<script>
  import { RadarChartOutlined } from '@ant-design/icons-vue'
  export default {
    props: {
      titleName: {
        type: String,
      },
      bgColor: {
        type: String,
        default: 'rgb(0,129,255)',
      },
      bodyNumber: {
        type: Number,
      },
      onlyOne: {
        type: Boolean,
        default: false,
      },
    },
    components: {
      RadarChartOutlined,
    },
    data() {
      return {}
    },
  }
</script>
<style lang="less">
  .lattice {
    display: inline-block;
    min-width: 150px;
    height: 75px;
    padding: 10px;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    .lattice_body {
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: -5px;
      .bodyIcon {
        font-size: 33px;
        color: white;
        opacity: 0.7;
      }
      .bodyNumber {
        font-size: 25px;
        color: white;
        opacity: 0.7;
      }
    }
    .onlyOne {
      justify-content: center !important;
    }
    .lattice_flooter {
      position: absolute;
      left: 0px;
      bottom: -1px;
      width: 100%;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.1);
      border-radius: 0 0 10px 10px;
      color: white;
      opacity: 0.7;
      text-align: center;
      font-size: 16px;
    }
  }
</style>
